import React from 'react'
import {connect} from "react-redux";
import {Alert, Form, Switch, Input, Button, message} from 'antd';
import taxCodeServer from "../tax-code-server";
import {messages} from "share/common";
import errorMessage from "share/errorMessage";

const {TextArea} = Input;
const FormItem = Form.Item;

class UpdateRule extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      loading: false,
    }
  }

  componentDidMount() {

  }

  componentWillReceiveProps() {

  }

  handleSave = (e) => {
    e.preventDefault();
    let {ruleInfo} = this.props;
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        Object.assign(ruleInfo, values);
        this.setState({loading: true})
        taxCodeServer.createOrEditTaxCodeRule(ruleInfo).then(res => {
          this.setState({loading:false})
          message.success(messages('common.save.success', {name: ""}));
          this.props.updateListRuleInfo(res.data);
          this.props.form.resetFields();
          this.props.onClose();
        }).catch(e => {
          this.setState({loading:false})
          errorMessage(e.response)
        })
      }
    })
  }

  render() {
    const {getFieldDecorator} = this.props.form;
    const {ruleInfo} = this.props;
    const {loading} = this.state;
    const formItemLayout = {
      labelCol: {span: 6},
      wrapperCol: {span: 13, offset: 1},
    };
    return (
      <div>
        <Alert message={messages('common.baseInfo')/*基本信息*/} style={{marginBottom: 20}} type="info"/>
        <Form onSubmit={this.handleSave}>
          <FormItem label={messages('common.column.status')/*状态*/} {...formItemLayout}>
            {
              getFieldDecorator('enabled', {
                  initialValue: (ruleInfo.enabled !== false),
                  valuePropName: 'checked',
                }
              )(
                <Switch/>
              )
            }
          </FormItem>
          <FormItem label={messages('finance-setting.key133'/*账套名称*/)} {...formItemLayout}>
            {
              getFieldDecorator('setOfBooksId', {
                  initialValue: ruleInfo.setOfBooksId || ruleInfo.setOfBookId
                }
              )(
                <span>{ruleInfo.setOfBooksName || ruleInfo.setOfBookName}</span>
              )
            }
          </FormItem>
          <FormItem label={messages('finance-setting.key72'/*规则名称*/)} {...formItemLayout}>
            {getFieldDecorator('ruleName', {
              rules: [{
                required: true,
                message: messages('common.please.input')/*请输入*/,
              }, {
                max: 100,
                message: messages('finance-setting.key145'/*最多输入100个字符*/),
              }],
              initialValue: ruleInfo.ruleName
            })(
              <TextArea placeholder={messages('finance-setting.key146'/*请输入，最多100个字符*/)} style={{height: 120}}/>
            )}
          </FormItem>
        </Form>
        <div className="footer-operate">
          <Button style={{marginLeft: 20}} onClick={this.handleSave} loading={loading} type="primary">{messages('common.save')/*保存*/}</Button>
          <Button style={{marginLeft: 20}} onClick={this.props.onClose}>{messages('common.cancel')/*取消*/}</Button>
        </div>
      </div>
    )
  }
}

UpdateRule.propsType = {
  ruleInfo: React.PropTypes.object,//规则对象信息
  onClose: React.PropTypes.func, //关闭弹框函数
  updateListRuleInfo: React.PropTypes.func, //关闭弹框函数
}
UpdateRule.defaultProps = {
  ruleInfo: {},
  onClose: () => {
  },
  updateListRuleInfo: () => {
  },
}
UpdateRule.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    company: state.login.company
  }
}

const WrappedNewExpense = Form.create()(UpdateRule);
export default connect(mapStateToProps)(WrappedNewExpense);
